<template>
	<view v-if="tabbar.length" class="container">
		<!-- 商品分类tab -->
		<view class="sharp-tabs">
			<scroll-view :scroll-x="true">
				<view class="sharp-tabs--container dis-flex">
					<view @tap="onToggleTab" :data-index="index" v-for="(item, index) in tabbar" :key="index" class="tabs-item dis-flex flex-dir-column flex-x-center flex-y-center" :class="{ active: curTabIndex == index }">
						<block v-if="item.status == StateEnum.ACTIVE_STATE_NOTICE.value">
							<view class="item-title">{{ item.status_text }}</view>
						</block>
						<block v-else>
							<view class="item-time">{{ item.active_time }}</view>
							<view class="item-status">{{ item.status_text }}</view>
						</block>
					</view>
				</view>
				<view class="sharp-tabs--empty"></view>
			</scroll-view>
		</view>
		<!-- 秒杀活动 -->
		<view class="sharp-active dis-flex flex-dir-column flex-y-center">
			<!-- 活动状态 -->
			<view class="active-status">
				<text class="active-status--icon iconfont icon-artboard"></text>
				<text class="active-status--time" v-if="tabbar[curTabIndex].status != StateEnum.ACTIVE_STATE_NOTICE.value">{{ tabbar[curTabIndex].active_time }}</text>
				<text class="active-status--text">{{ tabbar[curTabIndex].status_text2 }}</text>
			</view>
			<!-- 倒计时 -->
			<view class="active--count-down dis-flex flex-y-center">
				<view class="clock-text">
					<text>{{ tabbar[curTabIndex].status == StateEnum.ACTIVE_STATE_BEGIN.value ? '距结束' : '距开始' }}</text>
				</view>
				<view class="clock dis-flex">
					<view class="clock-time">
						<text>{{ countDownList[0].dynamic.hou }}</text>
					</view>
					<view class="clock-symbol"><text>:</text></view>
					<view class="clock-time">
						<text>{{ countDownList[0].dynamic.min }}</text>
					</view>
					<view class="clock-symbol"><text>:</text></view>
					<view class="clock-time">
						<text>{{ countDownList[0].dynamic.sec }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="bargain-hall">
			<!-- 商品列表 -->
			<view class="goods-item" v-for="item in goodsList.data" :key="item.sharp_goods_id">
				<form @submit="onTargetActive" report-submit="true" :data-id="item.sharp_goods_id">
					<button formType="submit" class="btn-normal">
						<view class="goods-item--container dis-flex">
							<!-- 商品图片 -->
							<view class="goods-image"><image :src="item.goods_image"></image></view>
							<view class="goods-info">
								<!-- 商品名称 -->
								<view class="goods-name">
									<text class="twolist-hidden">{{ item.goods_name }}</text>
								</view>
								<!-- 秒杀进度条 -->
								<view class="sharp-progress dis-flex flex-y-center">
									<view class="yoo-progress">
										<view class="yoo-progress--portion" :style="{ width: item.progress + '%' }"></view>
										<text class="yoo-progress--text">{{ item.progress }}%</text>
									</view>
									<view class="sharp-sales">已抢{{ item.sales_actual }}件</view>
								</view>
								<!-- 秒杀活动价格 -->
								<view class="sharp-price dis-flex flex-y-end">
									<view class="seckill-price">
										<text class="f-24">￥</text>
										<text class="money">{{ item.goods_sku.seckill_price }}</text>
									</view>
									<view class="original-price">
										<text class="f-24">￥</text>
										<text class="money">{{ item.goods_sku.original_price }}</text>
									</view>
								</view>
								<!-- 操作按钮 -->
								<view class="opt-touch">
									<view class="touch-btn">
										<text>{{ tabbar[curTabIndex].status == StateEnum.ACTIVE_STATE_BEGIN.value ? '马上抢' : '查看商品' }}</text>
									</view>
								</view>
							</view>
						</view>
					</button>
				</form>
			</view>
			<view v-if="noMore" class="no-more f-28">亲, 没有更多了</view>
			<!-- 无数据提供的页面 -->
			<view v-if="!isLoading && !goodsList.data.length">
				<view class="yoshop-notcont">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无秒杀商品哦</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// 枚举类：秒杀活动商品状态
import StateEnum from '@/utils/enum/sharp/ActiveStatus.js';
import CountDown from '@/utils/countdown.js';
import Tools from '@/utils/Tools.js';
import Route from '@/utils/Route.js';
export default {
	
	data() {
		return {
			// 当前tab索引
			curTabIndex: 0,

			noMore: false, // 没有更多数据
			isLoading: true, // 是否正在加载中
			page: 1, // 当前页码

			StateEnum, // 枚举类：秒杀会场活动状态

			// 倒计时
			countDownList: [],

			// 秒杀活动场次
			tabbar: [],

			// 秒杀商品列表
			goodsList: []
		};
	},
	onShow() {
		if (this.curTabIndex == 0) {
			// 获取列表数据
			this.getApiData();
		}
	},
	methods: {
		/**
		 * 获取列表数据
		 */
		getApiData() {
			this.$get(this.$api.getSharpIndex, {}, res => {
				console.log(res.data);
				this.tabbar = res.data.tabbar;
				this.goodsList = res.data.goodsList;
				// this.setData(result.data);
				// 初始化倒计时组件
				this.initCountDownData();
			});
		},
		/**
		 * 初始化倒计时组件
		 */
		initCountDownData(data) {
			let curTabbar = this.tabbar[this.curTabIndex];
			// 记录倒计时的时间
			this.countDownList[0] = { date: curTabbar.count_down_time };
			// 执行倒计时
			CountDown.onSetTimeList(this, 'countDownList');
		},
		onToggleTab(e) {
			this.curTabIndex = e.currentTarget.dataset.index;
			this.goodsList = [];
			this.page = 1;
			this.isLoading = true;
			this.noMore = false;

			this.$nextTick(() => {
				// 获取列表数据
				this.getGoodsList();
				// 初始化倒计时组件
				this.initCountDownData();
			});
		},
		/**
		 * 获取列表数据
		 */
		getGoodsList(isNextPage) {
			const curTabbar = this.tabbar[this.curTabIndex];
			this.$get(
				this.$api.getSharpGoodsLists,
				{
					page: this.page || 1,
					active_time_id: curTabbar.active_time_id
				},
				res => {
					let resList = res.data.list;
					let dataList = this.goodsList;
					if (isNextPage == true) {
						this.$set(this.goodsList, 'data', dataList.data.concat(res.data));
						this.isLoading = false;
					} else {
						this.goodsList = resList;
						this.isLoading = false;
					}
				}
			);
		},
		/**
		 * 下拉到底部加载下一页
		 */
		onReachBottom() {
			const listData = this.goodsList;
			// 已经是最后一页
			if (this.page >= listData.last_page) {
				this.noMore = true;
				return false;
			}
			// 加载下一页列表
			this.page = ++this.page;
			this.getGoodsList(true);
		},
		/**
		 * 跳转到砍价商品详情
		 */
		onTargetActive(e) {
			let curTabbar = this.tabbar[this.curTabIndex];
			// 保存formid
			this.$saveFormId(e.detail.formId);
			let query = Tools.urlEncode({
				active_time_id: curTabbar.active_time_id,
				sharp_goods_id: e.currentTarget.dataset.id
			});
			Route.navigateTo({
				url: '../goods/index?' + query
			});
		}
	}
};
</script>

<style>
page,
.container {
	background: #efeff4;
} /*隐藏滚动条*/
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
.sharp-tabs {
	background: #fff;
}
.sharp-tabs .sharp-tabs--container {
	background: #30353c;
}
.sharp-tabs .sharp-tabs--empty {
	padding-bottom: 30rpx;
}
.sharp-tabs .tabs-item {
	position: relative;
	min-width: 170rpx;
	height: 110rpx;
	background: #30353c;
	color: #fff;
	padding: 15rpx 45rpx;
	text-align: center;
	box-sizing: border-box;
	white-space: nowrap;
}
.sharp-tabs .tabs-item .item-time {
	font-size: 32rpx;
}
.sharp-tabs .tabs-item .item-status {
	font-size: 24rpx;
}
.sharp-tabs .tabs-item .item-title {
	font-size: 30rpx;
}
.sharp-tabs .tabs-item.active {
	background: #fd4a5f;
}
.sharp-tabs .tabs-item.active::after {
	content: '';
	display: block;
	position: absolute;
	z-index: 999;
	bottom: -15rpx;
	left: 50%;
	margin-left: -12rpx;
	width: 0;
	height: 0;
	border: 20rpx solid #fd4a5f;
	border-left-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-bottom-width: 0;
} /* 活动状态 */
.sharp-active {
	background: #fff;
	padding-bottom: 30rpx;
}
.sharp-active .active-status {
	font-size: 32rpx;
	color: #fd4a5f;
	margin-bottom: 15rpx;
}
.sharp-active .active-status .active-status--icon {
	margin-right: 10rpx;
}
.sharp-active .active-status .active-status--time {
	margin-right: 10rpx;
} /* 倒计时 */
.active--count-down {
	font-size: 26rpx;
	height: 40rpx;
}
.active--count-down .clock-text {
	margin-right: 10rpx;
}
.active--count-down .clock-time {
	background: #252525;
	color: #fff;
	padding: 0 8rpx;
	line-height: 40rpx;
	border-radius: 8rpx;
}
.active--count-down .clock-symbol {
	padding: 0 8rpx;
} /* 商品列表 */
.bargain-hall {
	padding-top: 20rpx; /* background: #fff; */
}
.goods-item {
	background: #fff;
	padding: 30rpx 16rpx;
	border-bottom: 1rpx solid #e7e7e7;
}
.goods-item .goods-image image {
	display: block;
	width: 220rpx;
	height: 220rpx;
}
.goods-item .goods-info {
	width: 498rpx;
	padding-top: 8rpx;
	margin-left: 15rpx;
	position: relative;
}
.goods-item .goods-info .goods-name {
	font-size: 28rpx;
	min-height: 76rpx;
	margin-bottom: 20rpx;
} /* 秒杀进度条 */
.yoo-progress {
	position: relative;
	width: 70%;
	height: 14px;
	border-radius: 6px;
	background: rgb(248, 182, 182);
}
.yoo-progress--portion {
	width: 0%;
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(to right, rgb(247, 102, 83), #fd4a5f);
}
.yoo-progress--text {
	color: #fff;
	font-size: 24rpx;
	line-height: 1.6;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.sharp-sales {
	margin-left: 30rpx;
	font-size: 24rpx;
	color: #fd4a5f;
	white-space: nowrap;
} /* 秒杀价格 */
.sharp-price {
	margin-top: 40rpx;
	line-height: 1;
}
.seckill-price {
	font-size: 32rpx;
	color: #fd4a5f;
	margin-bottom: -2rpx;
}
.original-price {
	margin-left: 5rpx;
	font-size: 24rpx;
	color: #818181;
	text-decoration: line-through;
} /* 立即参加按钮 */
.opt-touch {
	position: absolute;
	bottom: 0;
	right: 10rpx;
}
.touch-btn {
	color: #fff;
	font-size: 26rpx;
	background: #fd4a5f;
	border-radius: 30rpx;
	padding: 10rpx 30rpx;
}
</style>
